<template>
	<view class="container">
		<u-search placeholder="查找感兴趣内容~" :show-action="false" v-model="keyword" @custom="onChange" @search="onChange" @change="onChange"></u-search>
		<!-- tabs -->
		<block v-if="keyword">
			<view class="tabs-box">
				<u-tabs :list="tabList" lineColor="#000" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
			</view>

			<q-post-list v-show="current === 0" :list="postList" :loadStatus="loadStatus"></q-post-list>
			<q-user-list v-show="current === 1" :list="userList" :loadStatus="loadStatus"></q-user-list>
			<q-topic-list v-show="current === 2" :list="topicList" :loadStatus="loadStatus"></q-topic-list>
		</block>
		<block v-else>
			<view class="empty-box">
				<image class="empty-img" mode="widthFix" src="../../static/search.png"></image>
				<text>搜索日记，用户</text>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			tabList: [
				{
					name: '动态'
				},
				{
					name: '用户'
				},
				{
					name: '圈子'
				}
			],
			current: 0,
			postList: [],
			userList: [],
			topicList: [],
			pageNum: 1,
			loadStatus: 'loadmore'
		};
	},
	onReachBottom() {
		let type = this.current;
		this.pageNum++;

		if (type === 0) {
			this.getPostList();
		}

		if (type === 1) {
			this.getUserList();
		}

		if (type === 2) {
			this.getTopicList();
		}
	},
	methods: {
		onChange() {
			if (this.keyword) {
				let type = this.current;

				this.pageNum = 1;

				if (type === 0) {
					this.postList = [];
					this.getPostList();
				}

				if (type === 1) {
					this.userList = [];
					this.getUserList();
				}

				if (type === 2) {
					this.topicList = [];
					this.getTopicList();
				}
			}
		},
		getTopicList() {
			this.loadStatus = 'loading';
			this.$H
				.post('topic/search', {
					keyword: this.keyword,
					page: this.pageNum
				})
				.then((res) => {
					this.topicList = this.topicList.concat(res.result.list);
					if (res.result.hasMorePages) {
						this.loadStatus = 'loadmore';
					} else {
						this.loadStatus = 'nomore';
					}
				});
		},
		getUserList() {
			this.loadStatus = 'loading';
			this.$H
				.post('user/search', {
					keyword: this.keyword,
					page: this.pageNum
				})
				.then((res) => {
					this.userList = this.userList.concat(res.result.list);
					if (res.result.hasMorePages) {
						this.loadStatus = 'loadmore';
					} else {
						this.loadStatus = 'nomore';
					}
				});
		},
		getPostList() {
			this.loadStatus = 'loading';
			this.$H
				.post('post/search', {
					keyword: this.keyword,
					page: this.pageNum
				})
				.then((res) => {
					this.postList = this.postList.concat(res.result.list);
				if (res.result.hasMorePages) {
					this.loadStatus = 'loadmore';
				} else {
					this.loadStatus = 'nomore';
				}
				});
		},
		tabChange(e) {
			let index = e.index;
			this.current = index;
			this.onChange();
		}
	}
};
</script>
<style>
page {
	background-color: #fff !important;
}
</style>
<style lang="scss" scoped>
@import 'search.scss';
</style>
